<template>
    <div>
        <el-card>
            <el-page-header content="产品列表" icon="" title="产品管理"></el-page-header>
        </el-card>
        <el-card>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="title" label="产品名称" />
                <el-table-column prop="introduction" label="简要描述" />
                <el-table-column prop="editTime" label="更新时间">
                    <template #default="scope">
                        {{ timeFormat.getTime(scope.row.editTime) }}
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="small" type="primary" circle :icon="Edit"
                            @click="handleEdit(scope.row)"></el-button>
                        <el-popconfirm title="你确认删除吗？" confirmButtonText="确定" cancelButtonText="取消"
                            @confirm="handleDelete(scope.row)">
                            <template #reference>
                                <el-button size="small" type="danger" circle :icon="Delete"></el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script setup>
import { ref, reactive, toRefs, onMounted } from 'vue'
import { Star, Edit, Delete, StarFilled } from "@element-plus/icons-vue";

import axios from 'axios';
import timeFormat from '@/util/timeFormat'
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
const store = useStore()
const router = useRouter()
const tableData = ref([])
const publisher = store.state.userInfo.username
onMounted(() => {
    getTableData()
})

const getTableData = async () => {
    const res = await axios.get(`/adminapi/product/list/publisher/${publisher}`)
    // console.log(res.data);
    tableData.value = res.data.data
    // console.log(tableData);
}

const handleDelete = async (item) => {
    // console.log(item);
    const result = await axios.delete(`/adminapi/product/list/${item._id}`)
    // console.log(result);
    if (result.data.ActionType === 'OK') {
        ElMessage.success("删除产品成功")
        await getTableData()
    } else {
        ElMessage.error(result.data.errorMsg)
    }

}
const handleEdit = (item) => {
    // console.log(item);
    router.push(`/product-manage/editproduct/${item._id}`)
}
</script>


<style scoped lang="scss">
:deep(.preview) {
    table {
        border: 1px solid #ccc;

        th,
        td {
            border: 1px solid #ccc;
            text-align: center;
            padding: 5px 5px;
        }
    }

    img {
        max-width: 100%;
    }
}
</style>